lots of style updates after design review, bug fixes, and more improve

8 files changed, 81 insertions, 44 deletions

diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index de8c3a26..1bbd6e66 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -35,16 +35,18 @@
 	let followed = false;
 </script>
 
-	<AppHeader avatarPosition="left-[calc(15vw-48px)]" />
+<AppHeader avatarPosition="left-[calc(15vw-48px)]" />
 
-	<div class="flex xl:block justify-center items-center my-20 px-3">
-		<div class="space-y-10 xl:space-y-0">
-			<div class="xl:ml-[calc(15vw-48px)] space-y-2 w-full md:w-72">
-				<h1 class="text-3xl font-bold">{$subject.username}</h1>
+<div class="flex xl:block justify-center items-center my-20 px-3">
+	<div class="space-y-10 xl:space-y-0">
+		<div class="xl:ml-[calc(15vw-48px)] space-y-2 w-full md:w-72">
+			<h1 class="text-3xl font-bold">{$subject.username}</h1>
 
-				<p class="text-secondary">{$subject.address && $subject.address !== "null" ? $subject.address : ''}</p>
+			<p class="text-secondary">
+				{$subject.address && $subject.address !== 'null' ? $subject.address : ''}
+			</p>
 
-				<!-- TODO
+			<!-- TODO
         we need to hook this up
         <button
 					class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
@@ -53,25 +55,25 @@
 					{$t('user.' + (followed ? 'remove' : 'follow'))}
 				</button>
         -->
-			</div>
+		</div>
 
-			<div class="space-y-5 static xl:absolute top-[255px] left-[calc(50vw-150px)]">
-				<div
-					on:click={() => copy(lightningAddress)}
-					id="qr"
-					class=" cursor-pointer w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
-				/>
+		<div class="space-y-5 static xl:absolute top-[255px] left-[calc(50vw-150px)]">
+			<div
+				on:click={() => copy(lightningAddress)}
+				id="qr"
+				class="cursor-pointer w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
+			/>
 
-				<p class="text-secondary text-center font-semibold">{$t('user.scanToPayBTC')}</p>
+			<p class="text-secondary text-xl text-center font-semibold">{$t('user.scanToPayBTC')}</p>
 
-				<div
-					class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center"
-				>
-					<span>{lightningAddress}</span>
-					<button class="hover:opacity-80" on:click={() => copy(lightningAddress)}>
-						<Icon icon="copy" style="ml-2" />
-					</button>
-				</div>
+			<div
+				class="bg-primary font-semibold rounded-xl text-sm p-3 flex flex-wrap justify-between items-center"
+			>
+				<span>{lightningAddress}</span>
+				<button class="hover:opacity-80" on:click={() => copy(lightningAddress)}>
+					<Icon icon="copy" style="ml-2" />
+				</button>
 			</div>
 		</div>
 	</div>
+</div>
diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte
index 7e424819..4c0917dc 100644
--- a/src/routes/[username]/dashboard/+page.svelte
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -11,7 +11,8 @@
 
 	let payreq = '',
 		payreqField,
-		withdrawing;
+		withdrawing,
+		loading;
 
 	let toggle = async () => {
 		payreq = '';
@@ -21,11 +22,14 @@
 	};
 
 	let withdraw = async () => {
+		loading = true;
 		try {
 			await post('/withdraw', { payreq });
 			withdrawing = false;
+			loading = false;
 		} catch (e) {
 			failure(e.message);
+			loading = false;
 		}
 	};
 
@@ -40,8 +44,8 @@
 
 <AppHeader avatarPosition="left-[calc(50vw-48px)] lg:left-[calc(15vw-48px)]" />
 
-<div class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-12 w-full md:w-72">
-	<h2 class="text-2xl font-semibold">{user.username}</h2>
+<div class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-20 w-full md:w-72">
+	<h2 class="text-3xl font-semibold">{user.username}</h2>
 	<span class="text-secondary">{user.address}</span>
 </div>
 
@@ -81,7 +85,7 @@
 		{:else}
 			<div class="space-y-3 w-[250px] md:w-[500px] md:pr-20">
 				<button on:click={() => (withdrawing = false)}>
-					<Icon icon="arrow-left" style="w-8" />
+					<Icon icon="arrow-left" style="w-8 hover:opacity-80" />
 				</button>
 
 				<div>
@@ -110,8 +114,33 @@
 					class="{!payreq
 						? 'opacity-50'
 						: 'opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white"
-					on:click={withdraw}>{$t('user.dashboard.send')}</button
+					on:click={withdraw}
 				>
+					{#if loading}
+						<svg
+							class="mx-auto h-6 w-6 animate-spin text-white"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+						>
+							<circle
+								class="opacity-25"
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="4"
+							/>
+							<path
+								class="opacity-75"
+								fill="currentColor"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							/>
+						</svg>
+					{:else}
+						{$t('user.dashboard.send')}
+					{/if}
+				</button>
 			</div>
 		{/if}
 	</div>
diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte
index 6a286071..ba443ff2 100644
--- a/src/routes/[username]/receive/+page.svelte
+++ b/src/routes/[username]/receive/+page.svelte
@@ -87,7 +87,7 @@
 {#if $user}
 	<AppHeader />
 
-	<div class="flex justify-center items-center mt-20 mb-3 px-3">
+	<div class="flex justify-center items-center mt-24 mb-3 px-3">
 		{#if $selectedRate}
 			<div class="space-y-5">
 				<!-- amounts -->
@@ -172,7 +172,7 @@
 
 				<div class="space-y-3 w-full md:w-[300px] mx-auto">
 					<button
-						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm {$invoiceAmount ===
+						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold {$invoiceAmount ===
 							0 || loading
 							? 'opacity-50'
 							: 'opacity-100 hover:opacity-80'}"
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index e3acc93c..978f537a 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -37,8 +37,8 @@
 
 <AppHeader />
 
-<form on:submit|preventDefault={save} class="mb-28">
-	<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
+<form on:submit|preventDefault={save} class="mb-[154px]">
+	<div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
 			{$t('user.settings.header')}
 		</h1>
@@ -55,9 +55,13 @@
 
 		<svelte:component this={comp} />
 	</div>
-	<div class="z-10 fixed bottom-0 bg-white shadow border w-full">
-		<button type="submit" class="primary">
-			<Icon icon="save" style="mr-1" />
+	<div
+		class="z-10 fixed bottom-0 bg-white shadow border-t w-full flex justify-center items-center py-3"
+	>
+		<button
+			type="submit"
+			class="bg-black text-white rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
+		>
 			<div class="my-auto">Save Settings</div>
 		</button>
 	</div>
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index dbaea87e..ff7676f4 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -213,6 +213,7 @@
 	{/if}
 </div>
 
+<!-- TODO
 <div>
 	<span class="font-bold mb-1 block">{$t('user.settings.theme')}</span>
 	<p class="text-secondary mb-1">{$t('user.settings.themeDescription')}</p>
@@ -226,4 +227,4 @@
 			on:click={() => handleThemeClick(colors)}
 		/>
 	{/each}
-</div>
+</div> -->
diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte
index b74193cf..1b8fb125 100644
--- a/src/routes/[username]/settings/_security.svelte
+++ b/src/routes/[username]/settings/_security.svelte
@@ -36,7 +36,7 @@
 				toggleEnabling();
 			}
 		} catch (e) {
-			failure('Failed to enable 2fa, try again');
+			failure('Failed to enable 2FA, try again');
 		}
 	};
 
@@ -50,13 +50,14 @@
 				toggleDisabling();
 			}
 		} catch (e) {
-			failure('Failed to disable 2fa, try again');
+			failure('Failed to disable 2FA, try again');
 		}
 	};
 
 	$: otpUri = `otpauth://totp/coinos:${$user.username}?secret=${$user.otpsecret}&period=30&digits=6&algorithm=SHA1&issuer=coinos`;
 </script>
 
+<!-- TODO
 <div>
 	<span class="font-bold mb-1">{$t('user.settings.securityPIN')}</span>
 	<p class="text-secondary mb-1">
@@ -80,9 +81,9 @@
 			><Icon icon="lock" style="mr-1" /> {$t('user.settings.setPIN')}</button
 		>
 	{/if}
-</div>
+</div> -->
 
-<!-- TODO -->
+<!-- TODO
 <div>
 	<label for="auto-lock" class="font-bold mb-1">{$t('user.settings.autoLock')}</label>
 	<p class="text-secondary mb-1">
@@ -95,7 +96,7 @@
 		<option value="60">1 h</option>
 		<option value="480">8 h</option>
 	</select>
-</div>
+</div> -->
 
 <div>
 	<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
diff --git a/src/routes/[username]/support/+page.svelte b/src/routes/[username]/support/+page.svelte
index acaa8d2b..663ba8a6 100644
--- a/src/routes/[username]/support/+page.svelte
+++ b/src/routes/[username]/support/+page.svelte
@@ -10,7 +10,7 @@
 {#if $user}
 	<AppHeader />
 
-	<div class="my-20">
+	<div class="mt-24 mb-20">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
 			{$t('user.support.header')}
 		</h1>
diff --git a/src/routes/[username]/transactions/[...page]/+page.svelte b/src/routes/[username]/transactions/[...page]/+page.svelte
index 2e9cb70e..0eef04fe 100644
--- a/src/routes/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/[username]/transactions/[...page]/+page.svelte
@@ -17,7 +17,7 @@
 
 <AppHeader />
 
-<div class="my-20">
+<div class="mt-24 mb-20">
 	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
 		{$t('user.transactions.header')}
 	</h1>
@@ -36,7 +36,7 @@
 		</div>
 	</div>
 
-	<div class="container w-full mx-auto md:text-lg px-10 lg:px-40">
+	<div class="container w-full mx-auto md:text-lg px-10 lg:px-72">
 		<div class="text-secondary grid grid-cols-3 mb-5">
 			<h2>{$t('user.transactions.AMOUNT')}</h2>
 			<h2 class="text-center">{$t('user.transactions.TYPE')}</h2>